<div id="gn-editor-validation-panel" class="panel panel-default" data-ng-class="getClass()">
  <div class="panel-heading"
       data-gn-slide-toggle="">
    <i class="fa fa-fw" data-ng-class="getClass('icon')"></i>&nbsp;
    <span data-translate="">validationReport</span>
  </div>
  <!-- /.panel-heading -->
  <div class="panel-body" data-ng-show="ruleTypes.length !== 0">
    <div class="btn-toolbar" role="toolbar">

      <div class="pull-right">
        <div class="btn-group ">
          <small data-ng-show="hasSuccess || hasErrors" class="gn-margin-right" data-translate="">showMessages</small>
        </div>
        <div class="btn-group btn-group-xs" role="group">
          <button type="button" class="btn btn-default btn-xs"
                  data-ng-class="showSuccess ? 'active' : ''"
                  data-ng-click="toggleShowSuccess();$event.stopPropagation();"
                  data-ng-show="hasSuccess"
                  data-toggle="tooltip" data-placement="top" title="{{'showHideSuccess' | translate}}">
            <span class="fa fa-thumbs-up text-success" aria-hidden="true"></span>
          </button>
          <button type="button" class="btn btn-default btn-xs"
                  data-ng-class="showErrors ? 'active' : ''"
                  data-ng-click="toggleShowErrors();$event.stopPropagation();"
                  data-ng-show="hasErrors"
                  data-toggle="tooltip" data-placement="top" title="{{'showHideErrors' | translate}}">
            <span class="fa fa-thumbs-down text-danger" aria-hidden="true"></span>
          </button>
        </div>
      </div>
    </div>
    <!-- /.btn-toolbar -->
    <div class="gn-validation-report gn-margin-top" data-ng-show="ruleTypes.length !== 0">
      <div class="panel panel-default"
           data-ng-repeat="type in ruleTypes"
           data-ng-class="'schematron-result-list-' + labelImportanceClass(type)">
        <div data-gn-slide-toggle="{{initialSectionsClosed}}" class="panel-heading clearfix">
          <div class="col-md-9">
            <h2 class="gn-schematron-title"><span data-ng-if="type.schematronVerificationError">
              <i class="fa fa-exclamation-triangle fa-fw text-danger"></i>&nbsp;</span>{{(type.label || type.id) | translate}}</h2>
          </div>
          <div class="col-md-3 gn-nopadding-right" data-ng-if="!type.schematronVerificationError">

            <span class="label pull-right"
                  data-ng-class="labelImportanceClass(type)"
                  data-ng-if="type.total === '?'">
              <ng-pluralize count="type.error"
                            when="{'0': '0 ' + ('error' | translate),
                            '1': '1 ' +  ('error' | translate),
                            'other': '{} ' +  ('errors' | translate)}">
              </ng-pluralize>
            </span>
            <span class="label pull-right"
                  data-ng-class="labelImportanceClass(type)"
                  data-ng-if="type.total !== '?'">{{type.success}} / {{type.total}}</span>
          </div>
          <div class="col-md-3 gn-nopadding-right" data-ng-if="type.schematronVerificationError">
            <span class="label pull-right label-danger" data-translate="">
              validationServiceError
            </span>
          </div>
        </div>
        <div class="panel-body" data-ng-if="type.schematronVerificationError">
          <ul class="list-group">
            <li class="list-group-item text-danger">
              <p>{{type.schematronVerificationError}}</p>
              <p data-translate="">validationServiceErrorDetail</p>
            </li>
          </ul>
        </div>
        <div class="panel-body" data-ng-if="!type.schematronVerificationError">
          <ul class="list-group" data-ng-repeat="pattern in type.patterns.pattern">
            <li class="list-group-item" data-ng-repeat="rule in pattern.rules.rule"
                title="{{rule.details}}"
                data-ng-dblclick="scrollTo(rule.ref)"
                data-ng-show="(showErrors && rule.type === 'error') || (showSuccess && rule.type === 'success')"
                data-ng-class="rule.type !== 'error' ? '' : (type.requirement === 'REQUIRED' ? 'text-danger' : 'text-info')">
              <p data-ng-class="rule.msg ? 'text-bold' : ''">{{pattern.title}}</p>
              <p data-ng-show="rule.msg"
                 ng-bind-html="rule.msg | linky"></p>
            </li>
          </ul>
        </div>
      </div>

    </div>
  </div>
  <!-- /.panel-body -->
</div>
